<template>
  <div class="echart" id="windPowerChart"></div>
</template>
<script>
import echart from 'echarts'
import {hotColdPipeWorkPowerforEnergySupply} from '@/api/scada'
export default {
  name: "echart",
  props: {},
  data() {
    return {
      option: {
        textStyle: {
          fontWeight: 400,
          fontSize: 14,
          color: '#666'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          right:'2%',
          icon:'circle'
        },

        grid: {
            left: 20,
            right: 20,
            bottom: 20,
            top: 50,
            containLabel:true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#E8E8E8",
              width: 1
            }
          }

        },

        yAxis: [{
          name: '单位(kW)',
          nameTextStyle: {
            fontWeight: 400,
            fontSize: 14,
            color: '#666'
          },
          type: 'value',
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "#E8E8E8"
            }
          },
          splitNumber:5

        }],
        series: [{
          name: '总用能功率',
          showSymbol: false,
          data: [],
          type: 'line',
          itemStyle: {
            color: "#0893FD"
          },
          smooth: false
        },{
          name: '总供能功率',
          showSymbol: false,
          data: [],
          type: 'line',
          itemStyle: {
            color: "#90D66E"
          },
          smooth: false
        }]
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    let echartBox = document.querySelector('#windPowerChart')
    let myCahrt = echart.init(echartBox)
      hotColdPipeWorkPowerforEnergySupply().then(res=>{
          console.log(res)
          this.option.series[0].data = res.result.map(item=>+item.ynPowerTotal);
          this.option.series[1].data = res.result.map(item=>+item.gnPowerTotal);
          this.option.xAxis.data = res.result.map(item=>item.xData);
          myCahrt.setOption(this.option, true);

      })
  },
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="scss">
  .echart {
    height: 260px;
  }
</style>
